<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	 <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=request.getContextPath()%>/">
<meta charset="UTF-8">
<script type="text/javascript" src="js/public/jquery-1.9.1/jquery.js"></script>
<title>Insert title here</title>
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
button {
	height: 30px;
	font-weight: 900;
}

#pageButton {
	margin-left: auto;
	text-align: center;
}

#operation {
	width: 100%;
	height: 300px;
}

#addclass {
	margin-left: 360px;
	margin-top: 30px;
	margin-right: 90px;
}

#addClassTable {
	background-color: #cfcfcf;
	border: 2px solid black;
	width: 304px;
	position: absolute;
	left: 600px;
	top: 100px;
	display: none;
}

#addClassTable div {
	height: 40px;
	width: 304px;
	line-height: 40px;
}

#addClassTitle {
	font-size: 20px;
	text-align: center;
	border-bottom: 1px solid black;
}

.addClassLift {
	width: 40%;
}

.addClassRight {
	width: 58%;
}

#addClassButtonLift {
	width: 40%;
	text-align: center;
}

#addClassButton {
	margin-left: 60px;
	margin-right: 40px;
}
</style>
</head>
<body>
<input type="hidden" id="witchOption">
<input type="hidden" id="witchTr">
<input type="hidden" id="witchTrValue">
	<div id="content">
		<div id="option">
			<ul id="messageSystem">
				<li ><a href="jsp/index.jsp">宿舍管理系统</a>
					<ul>
						<shiro:hasAnyRoles name="student,teacher">
						<li>资料管理
							<ul>
								<li><a href="jsp/class.jsp">班级管理</a></li>
								<li><a href="jsp/student.jsp">学生管理</a></li>
							</ul>
						</li>
						</shiro:hasAnyRoles>
						
						
						<shiro:hasAnyRoles name="landlord,teacher">
						<li>房间管理
							<ul>
								<li><a href="jsp/house.jsp">房间信息</a></li>
							</ul>
						</li>
						</shiro:hasAnyRoles>
					</ul>
				</li>
			</ul>
		<ul>
			  <li><a href="/DormitoryManagement/logout">注销</a></li>
			</ul>
		
		</div>
		<div id="show">

			<%-- 班级添加表格 --%>
			<div id="addClassTable">
				<div id="addClassTitle">班级添加</div>
				<div>
					<span class="addClassLift">班级名称</span> <span class="addClassRight"><input
						type="text" id="addClassName"></span>
				</div>
				<div>
					<span class="addClassLift"> 带班老师</span> <span class="addClassRight">
						<select id="selectClassName">
							
					</select>
					</span>
				</div>
				<div>
					<span class="addClassLift">开班时间</span> <span class="addClassRight"><input
						type="date" id="addClassTime"></span>
				</div>
				<div></div>
				<div>
					<button id="addClassButton">添加</button>
					<button id="abolishClassButton">取消</button>
				</div>
			</div>





            <!-- 展示列表 -->
			<table id="tableShow">
				
			</table>


           <%-- 分页查询 --%>
			<div id="pageButton">
				<button id="firstPage">首页</button>
				<button id="prevPage">上一页</button>
				<span id="currentPage">1</span> 
				<span>/</span> 
				<span id="totalPage">1</span>
				<button id="nextPage">下一页</button>
				<button id="lastPage">尾页</button>
			</div>

			<div id="operation">
			
			
			<%--班级操作栏 --%>
			<div id=someOperationInClass>
			<shiro:hasRole name="teacher">
			   <button id="addclass">添加班级</button>
				<button id="deleteclass">删除班级</button>
			</shiro:hasRole>
			</div>
				
				
			</div>
		</div>
	</div>


	<script type="text/javascript">
		$(function() {
			var currentPage=parseInt($("#currentPage").html());
			
			showClass(currentPage);
			
			/* 首页 */
			$("#firstPage").click(function(){
				var current=parseInt($("#currentPage").html());
				if(current>1){
					showClass(1);
				} 
			});
			/* 最后一页 */
			$("#lastPage").click(function(){
				var current=parseInt($("#currentPage").html());
				var total=parseInt($("#totalPage").html());
				if(current<total){
					showClass(total);
				}
			});
			
			/* 上一页 */
			$("#prevPage").click(function(){
				var current=parseInt($("#currentPage").html());
				if(current>1){
					showClass(current-1);
				}
			});
			
			/* 下一页 */
			$("#nextPage").click(function(){
				var current=parseInt($("#currentPage").html());
				var total=parseInt($("#totalPage").html());
				if(current<total){
					showClass(current+1);
				}
			});
			
			
			/* 点击添加班级 */
			$("#addclass").click(function(){
				$.ajax({
					url : "teacher/showName",
					type : "post",
					dataType : "json",
					success : function(data) {
						var select=$("#selectClassName");
						for(var i=0;i<data.length;i++){
							var cname=$("<option value=\""+data[i].tid+"\"></option>").text(data[i].tname);
							select.append(cname);
						}
					}
			});
				$("#addClassTable").fadeIn("fast");
	    		showblack();
			});
			
			/* 点击添加班级确定 */
			$("#addClassButton").click(function(){
				var addClassName=$("#addClassName").val();
				var addClassTecher=parseInt($("#selectClassName").val());
				var addClassTime=$("#addClassTime").val();
				$.ajax({
					url : "class/add",
					type : "get",
					data : {
						"cname" :addClassName,
						"tid" :addClassTecher,
						"ctime" :addClassTime
					},
					dataType : "json",
					success : function(data) {
						if(data=="成功"){
							var currentPage=parseInt($("#currentPage").html());
							showClass(currentPage);
							$("#addClassTable").fadeOut("fast");
				    		closeblack();
				    		
				    		
						}
						}
			       });
			});
				
			
			
			/* 点击添加班级取消*/
			$("#abolishClassButton").click(function(){
				$("#addClassTable").fadeOut("fast");
	    		closeblack();
			});
			
			/* 删除班级*/
			$("#deleteclass").click(function(){
				var witchTrValue=$("#witchTrValue").val();
				var witchTrInt=parseInt($("#witchTr").val());
				if(witchTrInt>0){
					if(witchTrValue!=0){
						alert("该班级含有学生，无法删除!");
					}
					else{
						$.ajax({
							url : "class/delete",
							type : "post",
							data : {
								cid:witchTrInt
							},
							dataType : "json",
							success : function(data) {
								if(data=="成功"){
									var currentPage=parseInt($("#currentPage").html());
									showClass(currentPage);
								  }
								else{
									alert(data);
								}
								}
					       });
					}
					var witchTr=$("#witchTr").val();
					$("#"+witchTr).prop("style","background-color:#ffffff ");
					//将哪一行的值为0；
					$("#witchTr").val(0);
				}
				else{
					alert("未选中目标");
				}
			});
			
			
			
			
			
			
			
			
			
			
			
			
		});
		
		/* 查询操作 */
		function divOnclick1(trId) {
			alert(12);
			
			
		};
		
		/* 删除操作 */
		/* 点击表格*/
		function divOnclick2(trId,trVal) {
			var witchTr=$("#witchTr").val();
			if(witchTr !="" || witchTr!=null){
				$("#"+witchTr).prop("style","background-color:#ffffff ");
			}
			$("#"+trId).prop("style","background-color: #cfcfcf");
		    $("#witchTr").val(trId);
			$("#witchTrValue").val(trVal);
			
			
		};
		
		/* 展示班级 */
		function showClass(currentPage) {
			$("#tableShow").html("");
			$.ajax({
				url : "class/show",
				type : "post",
				data : {
					"currentPage" : currentPage,
					"count" : 10
				},
				dataType : "json",
				success : function(data) {
					var table=$("#tableShow");
					var thead=$("<thead id=\"theadShow\"></thead>");
					var tbody=$("<tbody id=\"tbodyShow\"</tbody>");
					var tr=$("<tr></tr>");
					var cname=$("<th></th>").text("班级姓名");
					var ctime=$("<th></th>").text("开班时间");
					var tname=$("<th></th>").text("带班老师");
					tr.append(cname);
					tr.append(ctime);
					tr.append(tname);
					thead.append(tr);
					var classes=data.data;
					$("#totalPage").html(data.sumPage);
					$("#currentPage").html(data.currentPage);
					
					
					
					for(var i=0;i<classes.length;i++){
						var btr=$("<tr onclick=\"divOnclick2("+classes[i].cid+","+classes[i].countStudent+")\" id="+classes[i].cid+"></tr>");
						var clas=classes[i];
						cname=$("<th></th>").text(classes[i].cname);
						ctime=$("<th></th>").text(classes[i].ctime);
						tname=$("<th></th>").text(classes[i].tname);
						btr.append(cname);
						btr.append(ctime);
						btr.append(tname);
						tbody.append(btr);
					}
					table.append(thead);
					table.append(tbody);
				}
			});
		}
		
		
	</script>

</body>
</html>